<template>
	<view class="container">
		<!-- 头部 -->
		<ty-header type="order"></ty-header>
		<!-- 主体 -->
		<view class="main">
			<!--查询-->
			<view class="search-form main-flex" id="search">
				<uni-forms ref="searchRef" :modelValue="searchModel" label-width="80px" label-align="right">
					<view class="main-flex">
						<uni-forms-item label="订单编号">
							<uni-easyinput v-model="searchModel.orderNumber" placeholder="请输入订单编号" />
						</uni-forms-item>
						<uni-forms-item label="订单状态">
							<uni-data-select
								v-model="searchModel.status"
								placeholder="请选择订单状态"
								:localdata="allStatusList"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="开始时间">
							<uni-datetime-picker type="datetime" placeholder="请选择开始时间" v-model="searchModel.startTime"/>
						</uni-forms-item>
						<uni-forms-item label="结束时间">
							<uni-datetime-picker type="datetime" placeholder="请选择结束时间" v-model="searchModel.endTime"/>
						</uni-forms-item>
						<uni-forms-item>
							<view class="main-flex">
								<up-button
									class="search-form-btn"
									text="搜索"
									type="primary"
									@click="searchSubmit"
									icon="search"></up-button>
								<up-button
									class="search-form-btn"
									@click="resetSubmit"
									text="重置"></up-button>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
			<!-- 商品列表 -->
			<view class="content">
				<!--内容-->
				<view class="table">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						:rowClassName="() => 'table-row'"
						stripe
						border>
						<template v-slot:status="{ row }">
							<uni-tag size="small" :class="`order-status-${row.status}`" :text="arrText(allStatusList, row.status)" />
						</template>
						<template v-slot:operate="{ row }">
							<uni-tag @click="openProduct(row)" type="primary" size="small" text="查看商品" />
						</template>
						<template v-slot:empty>
							<view class="table-empty">
								<up-empty mode="data"/>
							</view>
						</template>
					</ty-table>
				</view>
				<!--分页-->
				<view class="pagination" v-show="total > 0">
					<ty-pagination
						:total="total"
						:pageSize="pageSize"
						:currentPage="pageNum"
						:pageSizes="[10, 20, 30, 50]"
						layout="first,prev,page,next,last"
						@sizeChange="sizeChange"
						@change="pageChange">
					</ty-pagination>
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<ty-footer></ty-footer>
		
		<!-- 订单商品 -->
		<up-popup
			:show="showProduct"
			:zIndex="900"
			closeable
			mode="center"
			@close="closeProduct"
			bgColor="transparent">
			<view class="product">
				<view class="product-title">订单商品</view>
				<view class="product-content">
					<scroll-view scroll-y class="product-box">
						<view class="table">
							<ty-table
								:data="order?.productList || []"
								:columns="columnsProduct"
								:sortable="true"
								:cellClassName="() => 'table-cell'"
								:headerCellClassName="() => 'table-cell'"
								:rowClassName="() => 'table-row'"
								stripe
								border>
								<template v-slot:productImg="{ row }">
									<up-image width="60px" height="60px" @click.stop="previewImg(row.productImg)" :src="row.productImg" :lazy-load="true"></up-image>
								</template>
								<template v-slot:money="{ row }">
									{{productMoney(row)}}
								</template>
							</ty-table>
						</view>
					</scroll-view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { orderList } from "@/api/app_api/order"
import { copyText, arrText, getRecentDays, getNode, previewImg } from '@/utils/ty.js'
import useUserStore from '@/store/modules/user'
import { allStatusList } from '@/utils/config'
import { Decimal } from 'decimal.js'

	const userStore = useUserStore()
	
	const pageHeight = ref(0)
	const init = async () => {
		const system = await uni.getSystemInfo()
		const query = uni.createSelectorQuery().in(this)
		const topNode = await getNode(query, '#search')
		pageHeight.value = system.windowHeight - topNode.height
	}

	// 确认搜索
	const searchRef = ref(null)
	const searchModel = ref({
		orderNumber: '',
		status: '',
		startTime: ``,
		endTime: ''
	})
	const searchSubmit = () => {
		pageNum.value = 1
		tableList.value = []
		searchFirst()
	}
	// 重置搜索
	const resetSubmit = () => {
		// searchRef.value.resetFields()
		searchModel.value = {
			orderNumber: '',
			status: '',
			startTime: ``,
			endTime: ''
		}
		searchFirst()
	}
	
	
	// 数据查询
	const pageNum = ref(1)
	const pageSize = ref(20)
	const total = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	
	// 表格头部
	const columns = ref([
		{ title: '订单ID', key: 'id', align: 'center' },
		{ title: '订单编号', key: 'orderNumber', align: 'center', width: '260px' },
		{ title: '商品数量', key: 'productCount', align: 'center' },
		{ title: '应付金额', key: 'originalPrice', align: 'center' },
		{ title: '折扣金额', key: 'discountPrice', align: 'center' },
		{ title: '实付金额', key: 'actualPrice', align: 'center' },
		{ title: '下单时间', key: 'createTime', align: 'center', width: '160px' },
		{ title: '支付时间', key: 'payTime', align: 'center', width: '160px' },
		{ title: '订单状态', key: 'status', align: 'center' },
		{ title: '操作', key: 'operate', align: 'center' }
	])
	
	// 从第一页查询
	const searchFirst = () => {
		pageNum.value = 1
		tableList.value = []
		getList()
	}
	//页数切换
	const pageChange = (page) => {
		pageNum.value = page
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		})
		getList()
	}
	//每页条数切换
	const sizeChange = (size) => {
		pageSize.value = size
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			isAsc: 'desc'
		}
		if (searchModel.value.orderNumber) {
			params.orderNumber = searchModel.value.orderNumber
		}
		if (searchModel.value.status || searchModel.value.status === 0) {
			params.status = searchModel.value.status
		}
		if (searchModel.value.startTime) {
			params.startTime = searchModel.value.startTime
		}
		if (searchModel.value.endTime) {
			params.endTime = searchModel.value.endTime
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		orderList(params).then(res => {
			tableList.value = res.data.map(item => {
				const productCount = item.productList.reduce((prev, cur, index, arr)=> {
					return prev + cur.number
				}, 0)
				return {
					...item,
					productCount 
				}
			}) || []
			total.value = res.allNumber
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 查看商品
	const showProduct = ref(false)
	const order = ref({})
	const columnsProduct = ref([
		{ title: '商品图片', key: 'productImg', align: 'center', width: '100px' },
		{ title: '商品名称', key: 'productName', align: 'center' },
		{ title: '商品单位', key: 'productUnit', align: 'center' },
		{ title: '商品数量', key: 'number', align: 'center' },
		{ title: '商品金额', key: 'money', align: 'center' }
	])
	const openProduct = (item) => {
		showProduct.value = true
		order.value = item
	}
	const closeProduct = () => {
		showProduct.value = false
		order.value = {}
	}
	
	const productMoney = (row) => {
		return (Decimal(row.number).mul(Decimal(row.price)).toNumber()).toFixed(2)
	}
	
	onMounted(async () => {
		// init()
		searchFirst()
	})
</script>

<style scoped lang="scss">
.search-form {
	height: 80px;
	background-color: #fff;
	padding: 15px 20px;
	box-sizing: border-box;
	&-btn {
		width: 100px;
	}
}
.order-box {
	height: calc(100vh - 180px);
}
.product {
	width: 800px;
	border-radius: 10px;
	background-color: #ffffff;
	&-title {
		line-height: 48px;
		text-align: center;
		font-weight: 600;
		font-size: 20px;
	}
	&-content {
		padding: 20px;
	}
	&-box {
		max-height: 80vh;
	}
}
</style>
